<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="telephone=no" name="format-detection">
    <title>黎世阁首页</title>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/shopLIst.css"/>


    <script src="js/jquery.min.js"></script>

    <script type="text/javascript">


        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;

                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
            recalc();
        })(document, window);

    </script>
</head>
<body>
<header>
    <i class="iconfont menu">&#xe60d;</i>
    <img class="logo" src="img/logo.png" alt=""/>
    <i class="iconfont search">&#xe6ac;</i>
</header>
<div class="msk_box">
    <i class="iconfont close">&#xe723;</i>
    <div class="nav_title">
        HOME
    </div>
    <ul class="nav_list">
        <li class="nav_item clearfix">
            <div class="clearfix"><p class="fl">空间 </p><i class="iconfont fr zhan">&#xe767;</i></div>

            <ul class="nav_two_list ">
                <li class="nav_two_item">卧房
                    <ul class="nav_three_list ">
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>


                    </ul>
                </li>
                <li class="nav_two_item">卧房
                    <ul class="nav_three_list ">
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>


                    </ul>
                </li>
                <li class="nav_two_item">卧房
                    <ul class="nav_three_list ">
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>


                    </ul>
                </li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>

            </ul>
        </li>
        <li class="nav_item clearfix">
            <div class="clearfix"><p class="fl">分类 </p><i class="iconfont fr zhan">&#xe767;</i></div>

            <ul class="nav_two_list ">
                <li class="nav_two_item">卧房
                    <ul class="nav_three_list ">
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>


                    </ul>
                </li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>

            </ul>
        </li>
        <li class="nav_item clearfix">
            <div class="clearfix"><p class="fl">论坛 </p><i class="iconfont fr zhan">&#xe767;</i></div>

            <ul class="nav_two_list ">
                <li class="nav_two_item">卧房
                    <ul class="nav_three_list ">
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>


                    </ul>
                </li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>

            </ul>
        </li>
        <li class="nav_item clearfix">
            <div class="clearfix"><p class="fl">特价活动 </p><i class="iconfont fr zhan">&#xe767;</i></div>

            <ul class="nav_two_list ">
                <li class="nav_two_item">卧房
                    <ul class="nav_three_list ">
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>


                    </ul>
                </li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>

            </ul>
        </li>
        <li class="nav_item clearfix">
            <div class="clearfix"><p class="fl">如何购买 </p><i class="iconfont fr zhan">&#xe767;</i></div>

            <ul class="nav_two_list ">
                <li class="nav_two_item">卧房
                    <ul class="nav_three_list ">
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>
                        <li class="nav_three_item">卧房</li>


                    </ul>
                </li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>
                <li class="nav_two_item">卧房</li>

            </ul>
        </li>
        <li class="nav_item clearfix">
            <div class="clearfix"><p class="fl">联系我们 </p></div>


        </li>

    </ul>
    <p class="lianxi">SERVICE我的家@wodejia.com<br>
        400-8888-666</p>
</div>
<div class="msk"></div>
<nav>
    <ul>
        <li class="color_red">综合</li>
        <li>销量</li>
        <li>上新</li>
        <li><span class="nav_price">价格</span>
        	<i class="iconfont up">&#xe60c;</i>
            <i class="iconfont down">&#xe621;</i>
        </li>
        <li class="screen"><i class="iconfont ">&#xe601;</i>筛选</li>
    </ul>

</nav>
<div class="screen_box">
	<div class="screenInfo">
	    <div class="screen_list">
	        <div class="screen_title">
	                     价格：<span class="style"></span>
	        </div>
	        <ul class="clearfix ">

	            <li>5000元以下</li>
	            <li>5000元-7000元</li>
	            <li>7000元-8000元</li>
	            <li>8000元-10000元</li>
	            <li >10000元以上</li>
	        </ul>
	    </div>
	    <div class="screen_list">
	        <div class="screen_title">
	                     面积：<span class="style"></span>
	        </div>
	        <ul class="clearfix">
	            <li>8㎡以下</li>
	            <li>8㎡-10㎡</li>
	            <li>10㎡-12㎡</li>
	            <li >12㎡-16㎡</li>
	            <li>16㎡以上</li>
	        </ul>
	    </div>
	    <div class="screen_list">
	        <div class="screen_title">
	                    风格：<span class="style"></span>
	        </div>
	        <ul class="clearfix">
                <li>现代简约</li>
	            <li>韩式</li>
	            <li>美式</li>
	            <li>法式</li>
	            <li>中式</li>
	            <li>欧式</li>
	            <li>地中海</li>
	            <li>英伦风</li>
	        </ul>
	    </div>
    </div>
    <div class="foot">
    	<div class="btn reset">重置</div>
    	<div class="btn confirm c_black">确认</div>
    </div>
</div>

<section>
    <ul class="clearfix">
        <li>
            <div class="shopImg">
                <img src="img/shopImg.png" alt="">
            </div>
            <p class="shopTitle">北欧现代伸缩落地灯</p>
            <p class="shopPrice">￥36,800</p>
        </li>
        <li>
            <div class="shopImg">
                <img src="img/shopImg.png" alt="">
            </div>
            <p class="shopTitle">北欧现代伸缩落地灯</p>
            <p class="shopPrice">￥36,800</p>
        </li>
        <li>
            <div class="shopImg">
                <img src="img/shopImg.png" alt="">
            </div>
            <p class="shopTitle">北欧现代伸缩落地灯</p>
            <p class="shopPrice">￥36,800</p>
        </li>
        <li>
            <div class="shopImg">
                <img src="img/shopImg.png" alt="">
            </div>
            <p class="shopTitle">北欧现代伸缩落地灯</p>
            <p class="shopPrice">￥36,800</p>
        </li>
        <li>
            <div class="shopImg">
                <img src="img/shopImg.png" alt="">
            </div>
            <p class="shopTitle">北欧现代伸缩落地灯</p>
            <p class="shopPrice">￥36,800</p>
        </li>
    </ul>
</section>
</body>
<script>
    $(".menu").click(function () {
        $('.msk_box').css('-webkit-transform','translate(100%,0)');
        setTimeout("$('.msk').fadeIn()",300)
    })
    $(".close").click(function () {
        $('.msk_box').css('-webkit-transform','translate(0,0)');
        setTimeout("$('.msk').fadeOut()",100)
    })



    $(".screen_list li").click(function () {
        $(this).addClass("price_active").siblings().removeClass("price_active")
        $(this).parent().parent().find(".style").text($(this).text());
    })
     $(".reset").click(function () {
         $(".screen_list li").removeClass("price_active");
         $(".style").text("")

     })
    $(".confirm").click(function () {
        $('.screen_box').css('-webkit-transform','translate(0,0)');
        setTimeout("$('.msk').fadeOut()",100)
    })
    $(".screen").click(function () {
      //$(".screen_box").animate({right:"0"},500);
        $('.screen_box').css('-webkit-transform','translate(-6.4rem,0)');
        setTimeout("$('.msk').fadeIn()",300)
    })
    $(".msk").click(function () {
        $('.msk_box').css('-webkit-transform','translate(0,0)');
        $('.screen_box').css('-webkit-transform','translate(0,0)');
        setTimeout("$('.msk').fadeOut()",100)
    })
    
    $("nav ul li").click(function(){
    	
    	$(this).addClass("color_red").siblings().removeClass("color_red");
    	if(!($(this).find('.up').hasClass('color_red'))) {
            $('.down').removeClass("color_red");
            $(this).children('.up').addClass("color_red");
        } else if($(this).find('.up').hasClass('color_red')) {
            $('.up').removeClass("color_red");
            $('nav ul li').find('.down').addClass("color_red");
        }
    })



    $(".nav_item").click(function () {

        if (!($(this).hasClass('active'))) {
            $(this).addClass("active").siblings().removeClass("active");
            $(".zhan").css('-webkit-transform', 'rotate(0deg)');
            $(this).find(".zhan").css('-webkit-transform', 'rotate(45deg)');
            $(".nav_two_list").slideUp();
            $(this).find(".nav_two_list").slideDown();
            $(".nav_three_list").slideUp();
        }
        else {
            $(".nav_item").removeClass("active");
            $(".zhan").css('-webkit-transform', 'rotate(0deg)');
            $(".nav_two_list").slideUp();
            $(".nav_three_list").slideUp();
        }



    });
    function stopBubble(e)
    {
        if (e && e.stopPropagation)
            e.stopPropagation();
        else
            window.event.cancelBubble=true
    }
    $(".nav_two_item").click(function (e) {

        if (!($(this).hasClass('active'))) {
            $(this).addClass("active").siblings().removeClass("active");
            $(".nav_three_list").slideUp();
            $(this).find(".nav_three_list").slideDown();


        }
        else {
            $(this).removeClass("active")
        }
        stopBubble(e)


    });
    $(".nav_three_item").click(function () {

        $('.nav_three_item').css('background', '#fff');
        $('.nav_three_item').css('color', '#999999');
        $(this).css('background', '#636363');
        $(this).css('color', '#ffffff');

    });







</script>
</html>